<template>
  <el-dialog v-model="show" title="选择开票订单" width="580" align-center>
    <div class="desc">
      提示：单次开票金额必须大于120元；已开具发票的订单不会显示在此列表。
    </div>
    <div class="search dfsb">
      <div>
        提已选择 
        <span class="num">{{multipleSelection.length}}</span>
        项，共 
        <span class="num">¥ {{ total }}</span>
      </div>
      <el-dropdown :hide-on-click="false">
        <span class="el-dropdown-link">
          <el-button round color="#0071bb" :icon="Setting">筛选</el-button> </span>
        <template #dropdown>
          <el-dropdown-menu style="max-height:300px">
            <el-dropdown-item v-for="(item, index) in checkArr" :key="index" @click.stop="filterTableData(item)">
              <el-checkbox v-model="item.show" size="large" :label="item.label" />
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <!-- 表格 -->
    <div class="table">
      <el-table ref="multipleTableRef" :data="tableData" style="width: 100%;" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" label="全选" />
        <!-- 动态表头 -->
        <el-table-column :prop="item.prop" :label="item.label" v-for="(item, index) in headerArr" :key="index">
          <template #default="scope" v-if="item.prop == 'price'">
            <span>¥ {{scope.row.price}}</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 底部分页 -->
      <div class="page_number">
        <el-pagination v-model:current-page="pager.currentPage" v-model:page-size="pager.pageSize"
          :disabled="!pager.total" layout="prev, pager, next, jumper,total" :total="pager.total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submit(ruleFormRef)" color="#0071bb">确定</el-button>
        <el-button @click="close()">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { Setting } from "@element-plus/icons-vue";
import { defineProps, defineEmits, toRefs } from 'vue';
const emit = defineEmits(['close', 'submit']);
const props = defineProps<{ formData: any }>();
import { ElTable } from 'element-plus'
// 取消
const close = () => {
  emit('close')
}
// 总金额
const total = ref(0)
// 确定
const submit = () => {
  emit('submit',total)
}
const show = ref<boolean>(true)
// 是否显示新增素材弹窗
const showMaterial = ref(false)
// 是否显示新增设备弹窗
const showDevice = ref(false)
// 分页
const pager = ref({
  currentPage: 1,
  pageSize: 10,
  total: 10,
})
// 表格数据
const tableData = ref([
  {
    id: 1,
    orderNo: '564646256565656',
    time: '2024-05-22',
    price: 150.00
  },
  {
    id: 2,
    orderNo: '564646256565656',
    time: '2024-05-22',
    price: 150.00
  }
])
// 选中的属性
const checkArr = ref<any>([
  { label: '订单号', prop: 'orderNo', show: true },
  { label: '支付时间', prop: 'time', show: true },
  { label: '金额', prop: 'price', show: true },
])
// 表头
const headerArr = ref<any>([
  { label: '订单号', prop: 'orderNo', show: true },
  { label: '支付时间', prop: 'time', show: true },
  { label: '金额', prop: 'price', show: true },
])
// 点击触发方法
const filterTableData = (item: any) => {
  setTimeout(() => {
    headerArr.value = checkArr.value.filter((item: any) => item.show == true)
  }, 500)
}
// 改变pageSize
const handleSizeChange = (val: number) => {
	console.log(`${val} items per page`)
}
// 改变当前页码 currentPage
const handleCurrentChange = (val: number) => {
	console.log(`current page: ${val}`)
}
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
  const multipleSelection = ref<any[]>([])
// 多选
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val
  console.log(multipleSelection.value,'-------multipleSelection------------');
  let priceArr:any[] = multipleSelection.value.map((item:any) => item.price)
  total.value = priceArr.reduce((a,b)=>{
  return a + b;
})

}
</script>

<style lang="scss" scoped>
.df {
  display: flex;
  align-items: center;
}

.dfsb {
  display: flex;
  justify-content: space-between;
}

.fd {
  font-weight: bold;
}

.desc {
  background: #00ffff;
  padding: 20px;
}

.search {
  margin-top: 10px;
}

.table {
  margin-top: 6px;
}
.num{
  color: #0071BB;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 20px;
  font-size: 14px;
}
</style>